<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
					#div01
					{
						width: 50px;
						height: 50px;
						background-color: lightblue;
						position: absolute;
						top:100px;
						left:100px;
					}
				</style>
	</head>
	<body>
			<div id="div01">
					
				</div>
				<script>
					var moving = false;
					var posX;
					var posY;			
					div01.onmousedown= function(){
						console.log("鼠标按下，准备开始移动")
						moving = true
						// 计算开始移动时 鼠标在块中的偏移位置
						posX = div01.offsetLeft - event.clientX;
						posY = div01.offsetTop - event.clientY;
						
					}
					div01.onmousemove = function()
					{
						if(moving)
						{
							div01.style.left = event.clientX+posX+"px";
							div01.style.top = event.clientY+posY+"px";
						}
					}
					div01.onmouseup = function()
					{
						moving = false;
					}
					
					
				</script>
	</body>
</html>
